<template>
	<div class="container" v-loading="loading">
		<div class="head-img">
			<img src="../assets/head_03.png" alt="">
		</div>
		<div class="swiper">
			<img src="../assets/he_03.png" alt="">

		</div>
		<!-- 三btn -->
		<div class="menu">
			<ul>
				<router-link :to="menu[0].url+'/'+menu[0].id">
					<li>
						<img src="../assets/icon/message@2x.png" alt="">
						<span>{{menu[0].displayName}}</span>
					</li>
				</router-link>
				<router-link :to="menu[1].url+'/'+menu[1].id">
					<li>
						<img src="../assets/icon/law@2x.png" alt="">
						<span>{{menu[1].displayName}}</span>
					</li>
				</router-link>
				<router-link :to="menu[2].url+'/'+menu[2].id">
					<li>
						<img src="../assets/icon/active@2x.png" alt="">
						<span>{{menu[2].displayName}}</span>
					</li>
				</router-link>
			</ul>
		</div>
		<!-- 横tab -->
		<div class="switch_title">
			<ul>
				<li v-bind:class="{ active: isActive==index }" :key="index" @click="fnSwitch(index,item.id)" v-for="(item,index) in topMenu">
					<span>{{item.displayName}}</span>
					<div v-bind:class="{ line: isActive==index }"></div>
				</li>
			</ul>
		</div>
		<!-- tab内容 -->
		<div class="Indexhomes articles">
			<mt-loadmore :bottomPullText='bottomPullText' :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
				<ul>
					<li class="clearfix" v-for='item in Articles' :key='item.id'>
						<a :href="item.friendlyUrl" v-if='item.friendlyUrl'>
							<img :src="item.cover?item.cover:''" alt="">
							<div>
								<p class="text">{{item.title}}</p>
								<p class="time">{{item.creationTime | datas}}</p>
							</div>
						</a>
						<router-link v-bind="{to:'/Details/'+(item.id)}" v-else>
							<img :src="item.cover?item.cover:''" alt="">
							<div>
								<p class="text">{{item.title}}</p>
								<p class="time">{{item.creationTime | datas}}</p>
							</div>
						</router-link>
					</li>
				</ul>
			</mt-loadmore>
			<div class="page-footer" v-if="tip">到底了</div>
			<p class="page-footer" style="padding-top: 15px;" v-if="datalist">暂无数据</p>
		</div>
		<!-- 底部导航栏 -->
		<div class="nav">
			<ul>
				<li class="active" @click="fnHome">
					<img src="../assets/icon/tab_home_s@2x.png" alt="">
					<span>首页</span>
				</li>
				<li>
					<router-link :to="menu[0].url+'/'+menu[0].id">
						<img src="../assets/icon/tab_message_n@2x.png" alt="">
						<span v-if='menu[0].displayName'>{{menu[0].displayName}}</span>
						<span v-else>信息查询</span>
					</router-link>
				</li>
				<li>
					<router-link :to="menu[1].url+'/'+menu[1].id">
						<img src="../assets/icon/law_n@2x.png" alt="">
						<span v-if='menu[1].displayName'>{{menu[1].displayName}}</span>
						<span v-else>法律服务</span>
					</router-link>
				</li>
				<li>
					<router-link :to="menu[2].url+'/'+menu[2].id">
						<img src="../assets/icon/ative_n@2x.png" alt="">
						<span v-if='menu[2].displayName'>{{menu[2].displayName}}</span>
						<span v-else>在线互动</span>
					</router-link>
				</li>
				<li @click="fnSunTour">
					<img src="../assets/icon/111.png" alt="">
					<span>在线审批</span>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
var qs = require("qs");
import Api from "../kites/api";
export default {
  name: "Home",
  data() {
    return {
      datalist: false,
      tip: false,
      loading: true, //加载
      isActive: 0, //切换动态样式  1.政策发布   2.服务动态   3.信息公告
      menu: [
        {
          type: "",
          id: "",
          name: "",
          displayName: "",
          icon: "",
          url: ""
        },
        {
          type: "",
          id: "",
          name: "",
          displayName: "",
          icon: "",
          url: ""
        },
        {
          type: "",
          id: "",
          name: "",
          displayName: "",
          icon: "",
          url: ""
        }
      ], //菜单
      topMenu: [], //顶级分类
      Articles: [], //文章列表
      pages: 10,
      pageindex: 1,
      id: "",
      totalCount: 0,
      allLoaded: false,
      bottomPullText: "加载更多"
    };
  },

  beforeRouteLeave(to, from, next) {
    if (to.name == "Detail") {
      console.log(to);
      from.meta.keepAlive = true;
    } else {
      from.meta.keepAlive = false;
    }
    next();
  },
  beforeCreate() {
    this.openIds();
  },
  mounted() {
    this.GetTopMenu();
  },
  methods: {
    //获取token
    authenticate() {
      this.$post(Api.acctoken, {
        openId: localStorage.openID
      }).then(res => {
        console.log(res);
        if (res.data.success == true) {
          localStorage.token = res.data.result.token;
        } else {
          this.$message.error(res.data.error.message);
        }
      });
    },
    //获取token
    tokens() {
      var data = qs.stringify({
        grant_type: "password",
        username: userName,
        password: userPass,
        client_id: "app",
        client_secret: "app"
      });
      console.log(data);
      $.ajax({
        type: "POST",
        url: Api.tokens,
        //	             url: "/api/oauth/token",
        data: data,
        contentType: "application/x-www-form-urlencoded",
        dataType: "json",
        success: function(datas) {
          console.log(1);
          console.log(datas);
          localStorage.token = datas.access_token;
        },
        error: function(datas) {
          console.log(2);
          console.log(datas);
        }
      });
    },
    //切换动态
    fnSwitch(type, id) {
      this.isActive = type;
      this.datalist = false;
      this.allLoaded = false;
      this.GetMenuArticles(id);
    },
    //跳转到首页
    fnHome() {
      this.$router.push({
        path: "/"
      });
    },
    //跳转到在线审批
    fnSunTour() {
      this.$router.push({
        path: "/Onapprove"
      });
    },
    //跳转到社群管理
    fnComM() {
      this.$router.push({
        path: "/Community"
      });
    },
    //信息查询
    fnInfoQuery() {
      this.$router.push({
        path: "/InfoQuery"
      });
    },
    //法律服务
    fnLegalService() {
      this.$router.push({
        path: "/LegalService"
      });
    },
    //在线活动
    fnOnlineActivity() {
      this.$router.push({
        path: "/OnlineActivity"
      });
    },
    //获取顶级菜单
    GetTopMenu() {
      this.loading = true;
      this.$post(Api.GetTopMenu, {
        parentId: ""
      }).then(res => {
        if (res.data.success == true) {
          this.menu = res.data.result;
          localStorage.meun = JSON.stringify(res.data.result);
          this.GetTopMostCategory();
        } else {
          this.$message.error(res.data.error.message);
        }
      });
    },
    //
    GetMenuArticles(id) {
      this.tip = false;
      this.pages = 10;
      this.pageindex = 1;
      this.totalCount = 0;
      this.loading = true;
      this.id = id;
      this.$post(Api.GetMenuTreeArticles, {
        id: id,
        sorting: "",
        maxResultCount: this.pages,
        skipCount: this.pages * (this.pageindex - 1)
      }).then(res => {
        if (res.data.success == true) {
          this.loading = false;
          this.totalCount = res.data.result.totalCount;
          this.Articles = res.data.result.items;
          if (this.totalCount == 0) {
            this.datalist = true;
            this.allLoaded = true;
          }
        } else {
          this.loading = false;
          this.$message.error(res.data.error);
        }
      });
    },
    //获取首页置顶文章分类
    GetTopMostCategory() {
      this.$post(Api.GetTopMostCategory).then(res => {
        if (res.data.success == true) {
          this.topMenu = res.data.result;
          this.GetMenuArticles(this.topMenu[0].id);
        } else {
          this.$message.error(res.data.error);
        }
      });
    },
    loadBottom() {
      this.loading = true;
      this.pageindex++;
      this.$post(Api.GetMenuTreeArticles, {
        id: this.id,
        sorting: "",
        maxResultCount: this.pages,
        skipCount: this.pages * (this.pageindex - 1)
      }).then(res => {
        if (res.data.success == true) {
          this.loading = false;
          this.totalCount = res.data.result.totalCount;
          this.Articles = this.Articles.concat(res.data.result.items);
          if (this.totalCount == this.Articles.length) {
            this.tip = true;
            this.allLoaded = true;
          }
          this.$refs.loadmore.onBottomLoaded(); //finish refreshing state
        } else {
          this.loading = false;
          this.allLoaded = true; // 若数据已全部获取完毕
          this.$refs.loadmore.onBottomLoaded();
          this.$message.error(res.data.error);
        }
      });
    }
  }
};
</script>
<style scoped>
.articles {
  margin-bottom: 4%;
}
.tip {
  line-height: 30px;
  background: #f1f1f1;
  text-align: center;
  margin-top: 15px;
}

.page-footer {
  padding-bottom: 15px;
}
</style>